<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-date-picker
          v-model="searchObject.begin"
          type="date"
          placeholder="请选择开始日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObject.end"
          type="date"
          placeholder="请选择结束日期日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-button type="primary" @click="show">确定查询</el-button>
    </el-form>
    <el-row>
      <el-col :span="12">
        <div id="register_num" class="chart" style="height: 500px"></div>
      </el-col>
      <el-col :span="12">
        <div id="login_num" class="chart" style="height: 500px"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div id="view_num" class="chart" style="height: 500px"></div>
      </el-col>
      <el-col :span="12">
        <div id="course_add_num" class="chart" style="height: 500px"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import Statics from '@/api/statics';
export default {
    data(){
        return {
            searchObject:{},
            chartData:{

            }

        }
    },
    methods:{
        show(){
          Statics.showEcharts(this.searchObject.begin,this.searchObject.end).then(res=>{
            this.chartData=res.data.items;
            console.log(this.chartData)
            this.showChartByType("register_num","学员注册统计",this.chartData.register_num);
            this.showChartByType("login_num","学员登录统计",this.chartData.login_num);
            this.showChartByType("view_num","课程播放数统计",this.chartData.video_view_num);
            this.showChartByType("course_add_num","课程新增数统计",this.chartData.course_add_num);
          })
        },
     showChartByType(type,title,data){
            
            var myChart=this.$echarts.init(document.getElementById(type));
            var option={
                title:{
                    text:title
                },
               
                xAxis:{
                  data:data.xData
                    },
                yAxis:{},
                series:[{
                        name:"数据",
                        type:'line',
                        data:data.yData
                    }]       
            }
            myChart.setOption(option);
        }   
    }
}
</script>